<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="作者名称">
        <el-input v-model="author.name"></el-input>
      </el-form-item>

      <el-form-item label="排序">
        <el-input-number v-model="author.sort" controls-position="right" :min="0" /> <!--:min-->
      </el-form-item>

      <el-form-item label="级别">
        <el-select v-model="author.level" clearable  placeholder="选择级别">
          <el-option label="特约创作者" :value="1"></el-option>
          <el-option label="普通创作者" :value="2"></el-option>
        </el-select>
      </el-form-item >
      <el-form-item label="上传头像">
        <pan-thumb :width="String('100px')" :height="String('100px')" :image="String(author.avatar)"/>
        <el-button type="primary" @click="imageCropperShow=true">上传头像</el-button>
        <!--上传头像的界面 filed字段存在bug 后台已修改-->
        <image-cropper
          v-show="imageCropperShow"
          :width="300"
          :height="300"
          :key = "cropperKey"
          :url="BASE_API+'/service_upload/file/ossUploadFile'"
          field="file"
          @close="close"

          @crop-upload-success="cropSuccess"
        />

      </el-form-item>
      <el-form-item label="工作经历">
        <el-input v-model="author.career"></el-input>
      </el-form-item>

      <el-form-item label="创作者简介">
        <el-input v-model="author.intro" type="textarea" :rows="10"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="false" type="primary"  @click="saveClick()">保存</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>


<script>

  import author from '@/api/video/author'
  import ImageCropper from '@/components/ImageCropper/index'
  import PanThumb from '@/components/PanThumb/index'
export default {
  /*组件注册才能使用*/
  components:{ImageCropper,PanThumb},
  name: 'save',
  data(){
    return{
      author:{
        sort:0,
        level: 1
      },
      imageCropperShow:false,
      cropperKey:0,
      BASE_API:process.env.VUE_APP_BASE_API

    }
  },
  methods:{
    saveClick(){
       if(this.author.id){
         this.editAuthor()
       }
       else {
         this.addAuthor()
       }
    },
    editAuthor(){
      author.editAuthor(this.author).then(response=>{
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.$router.push("/author/list");
      })
    },
    addAuthor(){
      author.addAuthor(this.author).then(response=>{
        this.$message({

          message: '添加成功！',
          type: 'success'
        });
        this.$router.push("/author/list");
      })
    },
    close(){
      //关闭弹框
      this.imageCropperShow = false
      this.cropperKey = this.cropperKey + 1
    },
    cropSuccess(data){
      //关闭弹框
      this.imageCropperShow = false
      //保存老的图片地址
      var oldURL=this.author.avatar;
      this.author.avatar = data.url;
      this.cropperKey = this.cropperKey + 1
      //删除原来的图片
     if(oldURL!==null)
      {
        author.deleteImage(oldURL)
      }
    }
  }, created() {  //一进来就要获取参数
    //判断有没有参数 ，如果有， 获取参数
    if (this.$route.params && this.$route.params.id){
      let id = this.$route.params.id;
      //根据id获取该条参数对应的数据  --> 发送请求到服务器当中获取数据
      author.getOneAuthor(id).then(response=>{
        this.author = response.data.item;
      })
    }

  }
}
</script>

<style scoped>

</style>
